/**
*
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>注册协议</el-breadcrumb-item>
    </el-breadcrumb>
    <NoPermission
      v-if="!authFilter(permissionObj, 'index')">
    </NoPermission>

    <div v-else>

      <!--列表-->
      <div class="relative mgt16">
        <el-form label-width="100px" :model="editForm" ref="editForm" :rules="rules">
          <el-form-item label="语言"  prop="language">
            <el-select
              size="small"
              v-model="editForm.language"
              placeholder="语言"
              clearable
              filterable
              @change="changeLanguage">
              <el-option v-for="type in languageList" :label="type.label" :value="type.value" :key="type.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册协议"  prop="content"
                        v-if="showContent">
            <custom-quill-editor
              quillRequest="privacyPolicy"
              :content="editForm.content"
              @onEditorBlur="onEditorBlur"
              @onEditorChange="onEditorChange">
            </custom-quill-editor>
          </el-form-item>
        </el-form>
        <div
          v-if="authFilter(permissionObj, 'update')"
          class="mgl100">
          <el-button size="small" type="primary" class="title" @click="submit">保存/发布</el-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import CustomQuillEditor from "@/components/custom-quill-editor.vue"

export default {
  // 注册组件
  components: {
    CustomQuillEditor,
  },
  data() {
    return {
      // 导出数据接口
      exportExcelRequest:'registrationAgreementEdit',
      //新增语言
      editForm: {
        //新增语言
        language:'zh-CN',
        content: '',

      },
      // rules表单验证
      rules: {
        // content: [{ required: true, message: '请输入注册协议', trigger: 'blur' }],
        content: [{ required: true, message: '请输入注册协议', trigger: 'change' }],
        //新增语言
        language: [{ required: true, message: '请选择语言', trigger: 'change' }],
      },
      languageList:[],
      showContent: false,
      // 防重复点击
      allowRequest: true,
    }
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    const vm = this
    //新增语言
    vm.languageListGet().then(()=>{
      vm.getList(true)
    })
  },
  computed:{
    ...mapGetters(['userAuthList']),
    permissionObj(){
      if(this.userAuthList&&this.userAuthList.length>0){
        return this.authListFilter(this.userAuthList,'customManagement', 'registrationagreement')
      }
    },
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    submit() {
      const vm = this
      vm.$refs['editForm'].validate(valid => {
        if (valid) {
          const param = {
            ...vm.editForm,
          }
          vm.openFullScreen()
          vm.apiUrl[vm.exportExcelRequest](param, "POST")
            .then(res => {
              const {code, msg} = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '保存成功!',
                  type: 'success',
                })
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
            .finally(() => {
              vm.closeFullScreen(vm.openFullScreen());
            })
        }
      })
    },
    //获取语言列表
    languageListGet(){
      let vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.openFullScreen()
      vm.showContent = false
      return new Promise((resolve)=>{
        vm.$store.dispatch('languageListGet', {},"POST")
          .then(res => {
            const { code, data = [], msg } = res;
            if (code != 0) {
              vm.closeFullScreen(vm.openFullScreen());
              this.$message({
                type: 'error',
                message: msg
              })
            } else {
              if(data&&data.length>0){
                vm.languageList = data;
              }
            }
          })
          .finally(() => {
            resolve()
          })
      })
    },
    // 获取注册协议内容
    getList(allowRequest=false){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      let param = {
        language: vm.editForm.language
      }
      if(allowRequest){
        if(vm.allowRequest == false) return
        vm.allowRequest = false
        vm.openFullScreen()
      }
      vm.apiUrl.registrationAgreement(param,'POST')
        .then(res => {
          const { code, data, msg } = res;
          if (code != 0) {
            vm.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data){
              vm.editForm = {
                ...vm.editForm,
                ...data
              }
            }
          }
        }).finally(() => {
        vm.showContent = true
        if(allowRequest){
          vm.allowRequest = true
          vm.closeFullScreen(vm.openFullScreen());
        }
      })
    },
    onEditorBlur(e){
      // console.log('onEditorBlur',e)
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        content: e&&e.content ? e.content : ''
      }
    },
    onEditorChange(e){
      // console.log('onEditorChange',e)
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        content: e&&e.content ? e.content : ''
      }
    },
    changeLanguage(e){
      const vm = this
      // console.log('changeLanguage',e)
      vm.showContent = false
      vm.editForm = {
        ...vm.editForm,
        content: ''
      }
      vm.getList(true)
    },

  }
}
</script>

<style lang="less" scoped>
// 内容主体高度
/deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow{
  min-height: 500px;
}
</style>
